<script setup lang="ts">
defineOptions({
  name: "fabBoardGas"
});

import { ref, computed, onMounted, nextTick, inject, provide } from "vue";
import fabBoardModelBox from "../fabBoardModelBox.vue";
import gasSpecialGas from "./components/gasSpecialGas.vue";
import gasDetectorStatus from "./components/gasDetectorStatus.vue";
import gasChemicals from "./components/gasChemicals.vue";
import gasDetectorTask from "./components/gasDetectorTask.vue";
import gasAtmosphere from "./components/gasAtmosphere.vue";
import { queryPlatformOverview, queryDetectorStatusStat, queryDetectorIsolationTasks } from "@/api/modules/operation";
import { getFabBoardPieData, getFabBoardBarData, getFabBoardEffluentData, getFabBoardSelectOptions } from "@/api/modules/fab";

const emitBoardAreaEventCb = inject("emitBoardAreaEvent") as Function;
const area = inject("area", ref<string>(""));
const module_height = inject("moduleHeight", ref<string>(""));

const module_height_span = computed(() => Number(module_height.value?.replace(/px/g, "")));
const gas_module_height_span = computed(() => Math.floor((Number(module_height_span.value) * 2 + 16 - 24 * 2 - 16 * 4) / 3));
const gas_module_height = computed(() => `${gas_module_height_span.value}px`);

provide("gas_module_height", gas_module_height);

const gasSpecialGasRef = ref<InstanceType<typeof gasSpecialGas> | null>(null);
const gasDetectorStatusRef = ref<InstanceType<typeof gasDetectorStatus> | null>(null);
const gasChemicalsRef = ref<InstanceType<typeof gasChemicals> | null>(null);
const gasDetectorTaskRef = ref<InstanceType<typeof gasDetectorTask> | null>(null);
const gasAtmosphereRef = ref<InstanceType<typeof gasAtmosphere> | null>(null);

const loading = ref<boolean>(false);
const gasDetectorStatusLoading = ref<boolean>(false);
const gasDetectorTaskLoading = ref<boolean>(false);

// 数据  侦测器状态统计
const detectorStatusStatData = ref<any>(null);
// 数据  侦测器隔离今日任务
const detectorIsolationTasksData = ref<any>(null);

// 化学品
const chemicalsType = ref<string>("");
const chemicalsTypeName = ref<string>("");
const chemicalsTypeOptions = ref<Array<any>>([]);

// 大宗气
const atmosphereType = ref<string>("");
const atmosphereTypeName = ref<string>("");
const atmosphereTypeOptions = ref<Array<any>>([]);

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emitBoardAreaEventCb("gas", val);
  // 特气
  gasSpecialGasRef.value.querySelectOptionsFn(async () => {
    await nextTick();
    gasSpecialGasRef.value.initData();
    await nextTick();
    gasSpecialGasRef.value.init(flag);
  });
  // 化学品
  queryChemicalsSelectOptionsFn(async () => {
    await nextTick();
    gasChemicalsRef.value.initData();
    await nextTick();
    gasChemicalsRef.value.init(flag);
  });
  // 大宗气体
  queryAtmosphereSelectOptionsFn(async () => {
    await nextTick();
    gasAtmosphereRef.value.initData();
    await nextTick();
    gasAtmosphereRef.value.init(flag);
  });
};

const chemicalsTypeChangeHandler = async (val: string, flag: boolean = false) => {
  const t = chemicalsTypeOptions.value.find(item => item.value === val);
  chemicalsTypeName.value = t.label;
  await nextTick();
  gasChemicalsRef.value.initData();
  await nextTick();
  gasChemicalsRef.value.init(flag);
};

const atmosphereTypeChangeHandler = async (val: string, flag: boolean = false) => {
  const t = atmosphereTypeOptions.value.find(item => item.value === val);
  atmosphereTypeName.value = t.label;
  await nextTick();
  gasAtmosphereRef.value.initData();
  await nextTick();
  gasAtmosphereRef.value.init(flag);
};

const startLoading = () => {
  // 侦测器状态统计
  gasDetectorStatusLoading.value = true;
  // 侦测器隔离今日任务
  gasDetectorTaskLoading.value = true;
};

const queryChemicalsSelectOptionsFn = async (cb?: () => void) => {
  if (!!chemicalsTypeOptions.value?.length) {
    cb && cb();
    return;
  }
  // gasName      SPECIALTY    CHEMICALS   ATMOSPHERIC
  const params = { className: "GAS", gasName: "CHEMICALS" };
  const res = await getFabBoardSelectOptions(params);
  chemicalsTypeOptions.value = res.map((item: any) => ({ ...item, value: item.systemId, label: item.systemName }));
  chemicalsType.value = chemicalsTypeOptions.value[0].value;
  chemicalsTypeName.value = chemicalsTypeOptions.value[0].label;
  cb && cb();
};

const queryAtmosphereSelectOptionsFn = async (cb?: () => void) => {
  if (!!atmosphereTypeOptions.value?.length) {
    cb && cb();
    return;
  }
  // gasName      SPECIALTY    CHEMICALS   ATMOSPHERIC
  const params = { className: "GAS", gasName: "ATMOSPHERIC" };
  const res = await getFabBoardSelectOptions(params);
  atmosphereTypeOptions.value = res.map((item: any) => ({ ...item, value: item.systemId, label: item.systemName }));
  atmosphereType.value = atmosphereTypeOptions.value[0].value;
  atmosphereTypeName.value = atmosphereTypeOptions.value[0].label;
  cb && cb();
};

// 获取数据  侦测器状态统计 + 侦测器隔离今日任务
const queryDetectorDataFn = async () => {
  // 侦测器状态统计
  detectorStatusStatData.value = await queryDetectorStatusStat(null, () => {
    gasDetectorStatusLoading.value = false;
  });
  // 侦测器隔离今日任务
  detectorIsolationTasksData.value = await queryDetectorIsolationTasks(null, () => {
    gasDetectorTaskLoading.value = false;
  });
};

const queryData = async () => {
  // // 获取左侧下拉框option数据
  // await querySelectOptionsFn();
  // 获取数据  侦测器状态统计 + 侦测器隔离今日任务
  await queryDetectorDataFn();
};

const renderData = async () => {
  // 侦测器状态统计
  gasDetectorStatusRef.value?.init();
  // 侦测器隔离今日任务
  gasDetectorTaskRef.value?.init();
};

const init = async () => {
  // 开启loading
  startLoading();
  // 获取数据
  await queryData();
  await nextTick();
  await renderData();
};

onMounted(() => {
  init();
});

defineExpose({
  areaChangeHandler
});
</script>

<template>
  <div class="gas-content">
    <div class="gas-content-left">
      <div class="gas-content-item gas-special-gas">
        <!-- 特气 -->
        <gasSpecialGas ref="gasSpecialGasRef" :area="area" />
      </div>
      <div class="gas-content-item gas-chemicals-select">
        <span class="gas-title-left-label">化学品系统：</span>
        <px-select v-model="chemicalsType" style="width: 120px" size="small" placeholder="请选择化学品类型" @change="chemicalsTypeChangeHandler">
          <px-option v-for="item in chemicalsTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </div>
      <div class="gas-content-item gas-chemicals">
        <!-- 化学品 -->
        <gasChemicals ref="gasChemicalsRef" v-model:chemicalsType="chemicalsType" v-model:chemicalsTypeName="chemicalsTypeName" :area="area" />
      </div>
      <div class="gas-content-item gas-atmosphere-select">
        <span class="gas-title-left-label">大宗气系统：</span>
        <px-select v-model="atmosphereType" style="width: 120px" size="small" placeholder="请选择大宗气体类型" @change="atmosphereTypeChangeHandler">
          <px-option v-for="item in atmosphereTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </div>
      <div class="gas-content-item gas-atmosphere">
        <!-- 大宗气体 -->
        <gasAtmosphere ref="gasAtmosphereRef" v-model:atmosphereType="atmosphereType" v-model:atmosphereTypeName="atmosphereTypeName" :area="area" />
      </div>
    </div>
    <div class="gas-content-right">
      <div class="gas-content-item gas-detector-status">
        <!-- 侦测器状态统计 -->
        <gasDetectorStatus ref="gasDetectorStatusRef" v-model:loading="gasDetectorStatusLoading" :data="detectorStatusStatData" />
      </div>

      <div class="gas-content-item gas-detector-task">
        <!-- 侦测器隔离今日任务 -->
        <gasDetectorTask ref="gasDetectorTaskRef" v-model:loading="gasDetectorTaskLoading" :data="detectorIsolationTasksData" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gas-content {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 16px;
  width: calc(100% - 48px);

  .gas-content-left {
    display: flex;
    flex-direction: column;
    grid-column: 1 / 4;
    gap: 16px;
    width: 100%;

    .gas-special-gas {
      width: 100%;
      height: v-bind(gas_module_height);
    }

    .gas-chemicals-select {
      display: flex;
      gap: 8px;
      align-items: center;
      width: 100%;
      height: 24px;

      .gas-title-left-label {
        font-size: 14px;
        color: #333;
      }
    }

    .gas-chemicals {
      width: 100%;
      height: v-bind(gas_module_height);
    }

    .gas-atmosphere-select {
      display: flex;
      gap: 8px;
      align-items: center;
      width: 100%;
      height: 24px;

      .gas-title-left-label {
        font-size: 14px;
        color: #333;
      }
    }

    .gas-atmosphere {
      width: 100%;
      height: v-bind(gas_module_height);
    }
  }

  .gas-content-right {
    display: flex;
    flex-direction: column;
    grid-column: 4 / 5;
    gap: 16px;
    width: 100%;

    .gas-detector-status {
      width: 100%;
      height: v-bind(module_height);
    }

    .gas-detector-task {
      width: 100%;
      height: v-bind(module_height);
    }
  }
}
</style>
